<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>three</title>

    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    
</head>

<body>
    <!-- <h1>hello</h1> -->

</body>

<!-- <script src="./three.js-r102/examples/js/controls/OrbitControls.js"></script> -->
<script src="./other/js/three.js"></script>
<!-- <script src="./three.js-r102/build/three.min.js"></script> -->
<!-- <script src="./three.js-r102/build/three.module.js"></script> -->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.min.js"></script>
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>

<script>
    var scene = new THREE.Scene();

    var geometry = new THREE.BoxGeometry(100, 100, 100);
    var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff
    });

    var geometry2 = new THREE.SphereGeometry(60,40,40);
    var material2 = new THREE.MeshLambertMaterial({
        color: 0xff00ff,
        opacity:0.9,
        transparent:true
    });

    var geometry3 = new THREE.CylinderGeometry(50,50,100,25);
    var material3 = new THREE.MeshLambertMaterial({
        color: 0xffff00,
        opacity:0.5,
        transparent:true
    });



    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    var mesh2 = new THREE.Mesh(geometry2, material2);
    mesh2.translateY(120);
    scene.add(mesh2);

    var mesh3 = new THREE.Mesh(geometry3, material3);
    mesh3.position.set(120,0,0);
    scene.add(mesh3);

    
    var axisHelper=new THREE.AxisHelper(250);
    scene.add(axisHelper);


    var point = new THREE.PointLight(0xfffff);
    point.position.set(400, 200, 300);
    scene.add(point);

    var ambient = new THREE.AmbientLight(0x44444);
    scene.add(ambient);




    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;
    var s = 200;
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 500);
    camera.lookAt(scene.position);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0xb9d3ff, 1);
    document.body.appendChild(renderer.domElement);
    renderer.render(scene, camera);


    // let T0 = new Date();
    // function render() {
    //     let T1 = new Date();
    //     let t = T1 - T0;
    //     T0 = T1;
    //     requestAnimationFrame(render);
    //     renderer.render(scene, camera);
    //     mesh.rotateY(0.002 * t);
    //     mesh3.rotateY(0.002 * t);
    //     mesh2.rotateY(0.002 * t);
    // }
    // render();


    function render() {
        
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    render();
    var controls = new THREE.OrbitControls(camera, renderer.domElement);


</script>

</html>